<template>
	<view class="bigBox">
		<view class="content"
			><view class="title">就诊卡详细信息</view>
			<view class="detailed">
				<view class="detailed_content">
					<view class="detailed_content_title">姓名：</view>
					<view class="content_item">{{ dataList.patientName }}</view>
				</view>
				<view class="detailed_content">
					<view class="detailed_content_title">身份证号：</view>
					<view class="content_item">{{ dataList.patientIdcode }}</view>
				</view>
				<view class="detailed_content">
					<view class="detailed_content_title">联系电话：</view>
					<view class="content_item">{{ dataList.patientTelephone }}</view>
				</view>
				<view class="detailed_content">
					<view class="detailed_content_title">卡号：</view>
					<view class="content_item">{{ dataList.cardNo }}</view>
				</view>
				<view class="detailed_content">
					<view class="detailed_content_title">可用余额：</view>
					<view class="content_item">{{ dataList.availableBalance }}</view>
				</view>
			</view>
		</view>
		<!-- <view style="margin-top: 100rpx; margin-bottom: 40rpx">
			<u-button
				type="primary"
				@click="reportCard"
				:disabled="dataList.cardStatus == 0 ? false : true"
				>{{ dataList.cardStatus == 0 ? '申请挂失' : '已挂失' }}</u-button
			>
		</view>
		<viwe v-if="dataList.cardStatus == 1">
			<u-button type="primary" @click="reissueCard">重新补办</u-button>
		</viwe> -->
		<!-- 预留 -->
		<!-- <view style="margin-top: 40rpx" v-if="dataList.cardStatus != 0">
			<u-button type="primary" @click="startCard">启用该卡</u-button>
		</view> -->
		<!-- <view style="margin-top: 40rpx">
			<u-button type="error" @click="returnCard">申请退卡</u-button>
		</view> -->
		<view style="margin-top: 40rpx">
			<u-button type="error" @click="defaultCard">设置为默认卡</u-button>
		</view>

		<view class="safe"></view>
		<!-- <u-modal
			v-model="show"
			:content="content"
			:content-style="styleContent"
			show-cancel-button="false"
			@confirm="confirm"
		></u-modal> -->
		<!-- 挂失 -->
		<!-- <u-modal
			v-model="reportShow"
			:content="reportContent"
			show-cancel-button="false"
			@confirm="reportConfirm"
		></u-modal> -->
		<!-- <u-modal
			v-model="startShow"
			:content="startContent"
			show-cancel-button="false"
			@confirm="startConfirm"
		></u-modal> -->
		<u-toast ref="uToast" />
		<!-- <u-toast ref="reissueUToast" /> -->
	</view>
</template>

<script>
// import { updateCardStatus, cardFillDo } from '../../http/api'
import { defaultCard } from '../../http/api'
import { mapState } from 'vuex'
export default {
	data() {
		return {
			// show: false,
			// reportShow: false,
			// startShow: false,
			// content: '注意此操作不可撤销',
			// reportContent: '挂失提示',
			// startContent: '是否启用该卡',
			// styleContent: {
			// 	fontWeight: 'bole',
			// 	color: 'red',
			// },
			dataList: {},
			// 当前卡id
			UserCardId: '',
		}
	},
	computed: {
		...mapState({
			userId: state => state.userId,
			orgId: state => state.orgId,
			// 卡id
			CardId: state => state.CardId,
		}),
	},
	onLoad(option) {
		console.log(JSON.parse(option.parameter), '测试测试')
		this.dataList = JSON.parse(option.parameter)
		this.UserCardId = JSON.parse(option.parameter).cardId
	},
	methods: {
		// 设置默认卡
		defaultCardData(userId, orgId, cardId) {
			defaultCard({
				userId: userId,
				orgId: orgId,
				cardId: cardId,
			}).then(({ data, head }) => {
				console.log(data, head, '成功')
				if (head.code == 200) {
					this.$refs.uToast.show({
						title: '设置成功',
						type: 'success',
						url: '/pages/addPatientCard/index',
						duration: 1000,
					})
				} else {
					this.$refs.uToast.show({
						title: head.msg,
						type: 'error',
						duration: 1000,
					})
				}
			})
		},
		defaultCard() {
			this.defaultCardData(this.userId, this.orgId, this.UserCardId)
		},
		// 退卡
		// returnCard() {
		// 	this.show = true
		// },
		// confirm() {
		// 	this.$refs.uToast.show({
		// 		title: '操作成功',
		// 		type: 'success',
		// 		// url: '/pages/user/index',
		// 	})
		// },
		// // 挂失
		// reportCard() {
		// 	this.reportShow = true
		// },
		// reportConfirm() {
		// 	console.log(this.orgId)
		// 	updateCardStatus({
		// 		userId: this.userId,
		// 		orgId: this.orgId,
		// 		cardId: this.dataList.cardId,
		// 		patientIdcode: this.dataList.patientIdcode,
		// 		cardStatus: '1',
		// 		cardNo: this.dataList.cardNo,
		// 	}).then(({ data, head }) => {
		// 		console.log(data, head)
		// 		if (head.code == 200) {
		// 			this.$router.navigateTo({
		// 				url: '/pages/addPatientCard/index',
		// 			})
		// 		}
		// 	})
		// },
		// // 启用卡
		// startCard() {
		// 	this.startShow = true
		// },
		// startConfirm() {
		// 	updateCardStatus({
		// 		userId: this.userId,
		// 		orgId: this.orgId,
		// 		cardId: this.dataList.cardId,
		// 		patientIdcode: this.dataList.patientIdcode,
		// 		cardStatus: '0',
		// 	}).then(({ data, head }) => {
		// 		console.log(data, head)
		// 		if (head.code == 200) {
		// 			this.$router.navigateTo({
		// 				url: '/pages/addPatientCard/index',
		// 			})
		// 		}
		// 	})
		// },
		// //补办
		// reissueCard() {
		// 	console.log(this.dataList, '12313321321')
		// 	let canshu = {
		// 		cardId: this.CardId,
		// 		userId: this.$store.state.userId,
		// 		orgId: this.$store.state.orgId,
		// 		cardNo: this.dataList.cardNo,
		// 		patientName: this.dataList.userName,
		// 		patientGender: this.dataList.userGender,
		// 		patientIdcode: this.dataList.patientIdcode,
		// 		patientTelephone: this.dataList.patientTelephone,
		// 		patientMarriage: this.dataList.patientMarriage,
		// 	}
		// 	cardFillDo(canshu).then(({ data, head }) => {
		// 		if (head.code == 200) {
		// 			this.$refs.reissueUToast.show({
		// 				title: '补办成功',
		// 				type: 'success',
		// 				url: '/pages/addPatientCard/index',
		// 			})
		// 		} else {
		// 			console.log(data, head, '失败')
		// 		}
		// 	})
		// 	// this.$router.navigateTo({
		// 	// 	url:
		// 	// 		'/pages/addPatientCard/reissueCard?parameter=' +
		// 	// 		JSON.stringify(this.dataList),
		// 	// })
		// },
	},
}
</script>

<style lang="scss">
page {
	background: rgb(236, 236, 236);
}
.bigBox {
	width: 100%;
	padding: 20rpx;

	.content {
		background: #fff;
		-moz-box-shadow: 2px 2px 5px #9c9c9c;
		-webkit-box-shadow: 2px 2px 5px #9c9c9c;
		box-shadow: 2px 2px 5px #9c9c9c;
		text-align: center;
		.title {
			font-size: 18px;
			padding: 10px;
			font-weight: bold;
		}
		.detailed {
			.detailed_content {
				display: flex;
				padding: 20px;
				.content_item {
					font-size: 32rpx;
				}
				.detailed_content_title {
					font-weight: bold;
					font-size: 30rpx;
					text-align: left;
					min-width: 180rpx;
					margin-right: 50rpx;
				}
			}
		}
	}
}
.safe {
	height: 0;
	height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
}
</style>